CSSã³ã³ããã¯ãšãªã§æé«ã®ããã©ãŒãã³ã¹ãåŒãåºããŸãããïŒã¯ãšãªåŠçãç£èŠãåæãæé©åããŠãããããããã€ã¹ã§ããé«éã§ã¹ã ãŒãºãªWebäœéšãå®çŸããæ¹æ³ãåŠã³ãŸãã
CSSã³ã³ããã¯ãšãªããã©ãŒãã³ã¹ã¢ãã¿ãŒïŒã¯ãšãªåŠçåæ
ã³ã³ããã¯ãšãªã¯ãã¬ã¹ãã³ã·ãWebãã¶ã€ã³ã«é©åœããããããã³ã³ããŒãã³ãããã¥ãŒããŒãã§ã¯ãªããå å«èŠçŽ ã®ãµã€ãºã«åºã¥ããŠã¹ã¿ã€ã«ãé©å¿ã§ããããã«ããŸããããã«ãããåäŸã®ãªãæè»æ§ãšå¶åŸ¡ãå¯èœã«ãªããŸãããã ãã匷åãªããŒã«ãšåæ§ã«ããã®ããã©ãŒãã³ã¹ãçè§£ããæé©åããããšãéèŠã§ãããã®èšäºã§ã¯ãCSSã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ãç£èŠããã³åæããŠããã¹ãŠã®ããã€ã¹ãšç»é¢ãµã€ãºã§ã¹ã ãŒãºã§å¹ççãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããæ¹æ³ã«ã€ããŠèª¬æããŸãã
ã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ãç£èŠããçç±
ã³ã³ããã¯ãšãªã¯ãé©å¿æ§ãããåå©çšå¯èœãªã³ã³ããŒãã³ããäœæããäžã§å€§ããªå©ç¹ãæäŸããŸãããäžé©åã«å®è£ ãããããé床ã«è€éãªã¯ãšãªã¯ãWebãµã€ãã®ããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸããç£èŠãäžå¯æ¬ ãªçç±ã¯æ¬¡ã®ãšããã§ãã
- ã¬ã€ã¢ãŠãã·ããã®é²æ¢ïŒéå¹çãªã¯ãšãªã¯ã¬ã€ã¢ãŠãã®åèšç®ãããªã¬ãŒãã环ç©ã¬ã€ã¢ãŠãã·ããïŒCLSïŒã«ã€ãªããå¯èœæ§ããããŸããããã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«åœ±é¿ãäžããéèŠãªWebãã€ã¿ã«ã§ããäºæããªãã¬ã€ã¢ãŠãã·ãããçºçãããŠãŒã¶ãŒã¯ãäžæºãæããŠã»ãã·ã§ã³ãæŸæ£ããå¯èœæ§ããããŸãã
- ã¬ã³ããªã³ã°æéã®ççž®ïŒè€éãªã¯ãšãªãç¹ã«ãã¹ããããã³ã³ãããšè€éãªèšç®ãå«ãã¯ãšãªã¯ãã¬ã³ããªã³ã°æéãå¢å ãããããŒãžã®èªã¿èŸŒã¿é床ãšå¿çæ§ãäœäžãããå¯èœæ§ããããŸãããŠã£ãžã§ããã®ã¬ã€ã¢ãŠããåçã«èª¿æŽããããã«å€ãã®ã³ã³ããã¯ãšãªã䜿çšããè€éãªããã·ã¥ããŒãã¢ããªã±ãŒã·ã§ã³ãèããŠã¿ãŠãã ããããããã®ã¯ãšãªãæé©åãããŠããªãå Žåãåæã¬ã³ããªã³ã°æéã«å€§ããªåœ±é¿ãäžããå¯èœæ§ããããŸãã
- ã¢ãã€ã«ããã©ãŒãã³ã¹ã®åäžïŒã¢ãã€ã«ããã€ã¹ã¯ããã¹ã¯ããããšæ¯èŒããŠåŠçèœåãéãããŠããŸããæé©åãããŠããªãã³ã³ããã¯ãšãªã¯ãã¢ãã€ã«ããã©ãŒãã³ã¹ã«äžåè¡¡ãªåœ±é¿ãäžããåäœãé ããã€ã©ã€ã©ããã¢ãã€ã«ãšã¯ã¹ããªãšã³ã¹ã«ã€ãªããå¯èœæ§ããããŸããããšãã°ãåçãŠã§ããµã€ãã§ã¯ãã³ã³ããã¯ãšãªã䜿çšããŠãå©çšå¯èœãªã¹ããŒã¹ã«å¿ããŠç°ãªããµã€ãºã®ããŒãžã§ã³ã®ç»åã衚瀺ããå ŽåããããŸããäžé©åã«äœæãããã¯ãšãªã¯ãç»åã®ã£ã©ãªãŒãã¹ã¯ããŒã«ããéã«ã©ã°ãåŒãèµ·ããå¯èœæ§ããããŸãã
- ãªãœãŒã¹äœ¿çšéã®æé©åïŒéå¹çãªã¯ãšãªã¯ãããå€ãã®ãã©ãŠã¶ãªãœãŒã¹ãæ¶è²»ããç¹ã«ã¢ãã€ã«ããã€ã¹ã§CPU䜿çšçãšããããªãŒæ¶è²»éãå¢å ãããŸãã
- ããã©ãŒãã³ã¹ã®ããã«ããã¯ã®ç¹å®ïŒç£èŠã¯ãããã©ãŒãã³ã¹ã®åé¡ãåŒãèµ·ãããŠããç¹å®ã®ã³ã³ããã¯ãšãªãç¹å®ããã®ã«åœ¹ç«ã¡ãéçºè ã¯æé©åã®åãçµã¿ã广çã«éäžãããããšãã§ããŸãã
ã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ãç£èŠããããã®ããŒã«
ã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ãç£èŠããã³åæããã«ã¯ãããã€ãã®ããŒã«ãšææ³ã䜿çšã§ããŸãã
1. ãã©ãŠã¶éçºè ããŒã«
ææ°ã®ãã©ãŠã¶éçºè ããŒã«ã¯ãWebãµã€ãã®ããã©ãŒãã³ã¹ã«é¢ããå æ¬çãªæŽå¯ãæäŸããŸããã³ã³ããã¯ãšãªã«ãããã䜿çšããæ¹æ³ã次ã«ç€ºããŸãã
- ããã©ãŒãã³ã¹[Performance]ã¿ãïŒChromeãFirefoxãEdgeïŒïŒ[ããã©ãŒãã³ã¹[Performance]]ã¿ãã䜿çšãããšãã¬ã³ããªã³ã°ããã»ã¹ãèšé²ããã³åæã§ããŸããã³ã³ããã¯ãšãªã«é¢é£ä»ããããé·ãã¬ã³ããªã³ã°æéãé床ã®ã¬ã€ã¢ãŠãåèšç®ãããã³ã¹ã¯ãªããå®è¡æéãæ¢ããŸããããã䜿çšããã«ã¯ãWebãµã€ããéããéçºè ããŒã«ãéãã[ããã©ãŒãã³ã¹[Performance]]ã¿ãã«ç§»åããŠã[èšé²[Record]]ãã¯ãªãã¯ããŸããWebãµã€ããæäœããŸããèšé²ã忢ãããã¬ãŒã ã°ã©ããåæããŠãã³ã³ããã¯ãšãªã«é¢é£ããããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããŸãã
- ã¬ã³ããªã³ã°[Rendering]ã¿ãïŒChromeïŒïŒ[ã¬ã³ããªã³ã°[Rendering]]ã¿ãã«ã¯ãã¬ã€ã¢ãŠãã·ããé åã®ãã€ã©ã€ããªã©ã®æ©èœããããã³ã³ããã¯ãšãªãã¬ã€ã¢ãŠãã®äžå®å®ããåŒãèµ·ãããŠããé åãç¹å®ããã®ã«åœ¹ç«ã¡ãŸãããŸããããã©ãŒãã³ã¹ãäœãã³ã³ããã¯ãšãªã«ãã£ãŠããªã¬ãŒãããå¯èœæ§ã®ããæœåšçãªåæç»é åã匷調衚瀺ããããšãã§ããŸãã
- LighthouseïŒChromeãPageSpeed InsightsïŒïŒLighthouseã¯ãCSSãšã¬ã€ã¢ãŠãã«é¢é£ããæœåšçãªããã©ãŒãã³ã¹ã®åé¡ã®ç¹å®ãªã©ãWebãµã€ãã®ããã©ãŒãã³ã¹ãåäžãããããã®èªåç£æ»ãšæšå¥šäºé ãæäŸããŸããLighthouseãæèŒããPageSpeed Insightsã䜿çšãããšããããªãã¯URLã®ããã©ãŒãã³ã¹ããã¹ãã§ããŸãã
- èŠçŽ ã€ã³ã¹ãã¯ã¿ãŒ[Element Inspector]ïŒèŠçŽ ã€ã³ã¹ãã¯ã¿ãŒ[Element Inspector]ã䜿çšããŠãã³ã³ããã¯ãšãªã«ãã£ãŠé©çšãããã¹ã¿ã€ã«ã調ã¹ãããããæ£ããé©çšãããŠããããšã確èªããŸããããã¯ãããã©ãŒãã³ã¹ã®åé¡ã«å¯äžããŠããå¯èœæ§ã®ããäºæããªãåäœãŸãã¯ç«¶åãç¹å®ããã®ã«åœ¹ç«ã¡ãŸããããšãã°ãããã䜿çšããŠãç¹å®ã®èŠçŽ ã«å¯ŸããŠã©ã®ã³ã³ããã¯ãšãªãã¬ãŒã¯ãã€ã³ããããªã¬ãŒãããŠãããã確èªã§ããŸãã
2. Webãã€ã¿ã«[Web Vitals]æ¡åŒµæ©èœ
Webãã€ã¿ã«[Web Vitals]æ¡åŒµæ©èœã¯ãLargest Contentful PaintïŒLCPïŒãFirst Input DelayïŒFIDïŒãCumulative Layout ShiftïŒCLSïŒãªã©ã®äž»èŠãªããã©ãŒãã³ã¹ã¡ããªãã¯ã«é¢ãããªã¢ã«ã¿ã€ã ã®ãã£ãŒãããã¯ãæäŸããŸãããããã®æ¡åŒµæ©èœã¯ãã³ã³ããã¯ãšãªããããã®ã¡ããªãã¯ã«æªåœ±é¿ãäžããŠãããã©ããããã°ããç¹å®ããã®ã«åœ¹ç«ã¡ãŸãããããã¯ããã©ãŠã¶ã«çŽæ¥ã€ã³ã¹ããŒã«ã§ããŸãïŒäŸïŒChrome Web Vitalsæ¡åŒµæ©èœïŒã
3. ãªã¢ã«ãŠãŒã¶ãŒã¢ãã¿ãªã³ã°[Real User Monitoring]ïŒRUMïŒ
RUMã¯ãå®éã®ãŠãŒã¶ãŒããã®å®éã®ããã©ãŒãã³ã¹ããŒã¿ãæäŸãããã¹ãäžã«æããã«ãªããªãå¯èœæ§ã®ããããã©ãŒãã³ã¹ã®åé¡ãç¹å®ã§ããŸããRUMããŒã«ã¯ãããŒãžã®èªã¿èŸŒã¿æéãã¬ã³ããªã³ã°æéããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã®é å»¶ãªã©ã®ã¡ããªãã¯ããã£ããã£ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®ããæ£ç¢ºãªå šäœåãæäŸããŸããRUMããŒã«ã®äŸãšããŠã¯ãNew RelicãDatadogãGoogle AnalyticsïŒããã©ãŒãã³ã¹ãã©ããã³ã°ãæå¹ã«ãªã£ãŠããïŒãªã©ããããŸãã RUMããŒã¿ã¯ãç¹å®ã®å°ççå°åãŸãã¯ç¹å®ã®ããã€ã¹ã䜿çšããŠãããŠãŒã¶ãŒããã³ã³ããã¯ãšãªã«é¢é£ããããã©ãŒãã³ã¹ã®åé¡ãçµéšããŠãããã©ãããæããã«ããããšãã§ããŸãã
4. ã«ã¹ã¿ã ããã©ãŒãã³ã¹ãã©ããã³ã°
ãã现ããå¶åŸ¡ããã«ã¯ãJavaScriptã®performance APIã䜿çšããŠã«ã¹ã¿ã ããã©ãŒãã³ã¹ãã©ããã³ã°ãå®è£
ã§ããŸããããã«ãããã³ã³ããã¯ãšãªã«é¢é£ããç¹å®ã®ã³ãŒããããã¯ã®å®è¡æéãæž¬å®ãããã®ããã©ãŒãã³ã¹ã«é¢ããè©³çŽ°ãªæŽå¯ãåŸãããšãã§ããŸããããšãã°ãperformance.mark()ãšperformance.measure()ã䜿çšããŠãã³ã³ããã¯ãšãªãã¬ãŒã¯ãã€ã³ããããªã¬ãŒãããåŸãã³ã³ããŒãã³ããåã¬ã³ããªã³ã°ããããŸã§ã®æéã远跡ã§ããŸãã
ã¯ãšãªåŠçã®åæ
ããã©ãŒãã³ã¹ããŒã¿ãå ¥æããããããã©ãŒãã³ã¹ã®åé¡ã®æ ¹æ¬åå ãç¹å®ããããã«åæããå¿ èŠããããŸããã¯ãšãªåŠçã®æ¬¡ã®åŽé¢ãæ€èšããŠãã ããã
1. ã¯ãšãªã®è€éã
å€ãã®æ¡ä»¶ãšãã¹ããããã»ã¬ã¯ã¿ãŒãæã€è€éãªã¯ãšãªã¯ãåŠçæéã倧å¹
ã«å¢å ãããå¯èœæ§ããããŸããå¯èœãªéãã¯ãšãªãç°¡çŽ åããé床ã«å
·äœçãªã»ã¬ã¯ã¿ãŒã¯é¿ããŠãã ãããããšãã°ã.container > .card > .imageã®ãããªéåžžã«å
·äœçãªã»ã¬ã¯ã¿ãŒã䜿çšãã代ããã«ã.card-imageã®ãããªããäžè¬çãªã¯ã©ã¹ã䜿çšããã¹ã¿ã€ã«ãçŽæ¥é©çšããããšãæ€èšããŠãã ããã
2. ã¯ãšãªé »åºŠ
æ¥éã«å€åããã³ã³ãããµã€ãºã«åºã¥ããã®ãªã©ãé »ç¹ã«è©äŸ¡ãããã¯ãšãªã¯ãããã©ãŒãã³ã¹ã®ããã«ããã¯ã«ã€ãªããå¯èœæ§ããããŸãããµã€ãºå€æŽã€ãã³ãããããŠã³ã¹ãŸãã¯ã¹ãããã«ããŠãã¯ãšãªè©äŸ¡ã®é »åºŠãæžãããŸãããããŠã³ã¹ã¯ãæåŸã®ã€ãã³ãããäžå®æéãçµéããåŸã«ã®ã¿é¢æ°ãåŒã³åºãããããã«ããã¹ããããªã³ã°ã¯ã颿°ãç¹å®ã®æéå ã«åŒã³åºãããšãã§ããåæ°ãå¶éããŸãã
3. ã¬ã€ã¢ãŠãã®åèšç®
ã³ã³ããã¯ãšãªã¯ãã³ã³ããã®ãµã€ãºã倿Žããããšã¬ã€ã¢ãŠãã®åèšç®ãããªã¬ãŒããå¯èœæ§ããããŸããtransformãopacityãªã©ãã¬ã€ã¢ãŠãã«åœ±é¿ãäžããªãããããã£ã䜿çšããããå
šäœçãªã¬ã€ã¢ãŠãæ§é ãæé©åããããšã«ãããã¬ã€ã¢ãŠãã®åèšç®ãæå°éã«æããŸããã³ã³ããã¯ãšãªã«çŽæ¥åœ±é¿ãããªãèŠçŽ ã§contain: layoutã䜿çšããäžèŠãªã¬ã€ã¢ãŠãã®åèšç®ãé²ãããšãæ€èšããŠãã ããã
4. åæç»ãšãªãããŒ
ã³ã³ããã¯ãšãªã«ãã£ãŠããªã¬ãŒãããDOMãžã®å€æŽã¯ãåæç»ïŒèŠçŽ ã®åæç»ïŒãšãªãããŒïŒèŠçŽ ã®äœçœ®ãšãµã€ãºã®åèšç®ïŒãåŒãèµ·ããå¯èœæ§ããããŸããCSSããããã£ãæé©åããäžèŠãªDOMæäœãåé¿ããããšã«ãããåæç»ãšãªãããŒãæå°éã«æããŸããããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã掻çšããCPU䜿çšçãåæžããããã«ãJavaScriptããŒã¹ã®ã¢ãã¡ãŒã·ã§ã³ãããCSSã¢ãã¡ãŒã·ã§ã³ãåªå ããŸãã
ã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ã®æé©å
åæã«åºã¥ããŠãããã€ãã®æŠç¥ãå®è£ ããŠãã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ãæé©åã§ããŸãã
1. ã¯ãšãªã®ç°¡çŽ å
è€éãªã¯ãšãªããããã·ã³ãã«ã§å¹ççãªã¯ãšãªã«ãªãã¡ã¯ã¿ãªã³ã°ããŸããè€éãªæ¡ä»¶ããããå°ããããã管çãããããã£ã³ã¯ã«åå²ããŸãã CSS倿°ã䜿çšããŠãäžè¬çã«äœ¿çšãããå€ãä¿åããã¯ãšãªã®åé·æ§ãæžãããŸãã
2. ãµã€ãºå€æŽã€ãã³ãã®ãããŠã³ã¹ãšã¹ãããã«
ã³ã³ãããµã€ãºãæ¥éã«å€åããå ŽåããããŠã³ã¹ãŸãã¯ã¹ããããªã³ã°ææ³ã䜿çšããŠãã¯ãšãªè©äŸ¡ã®é »åºŠãå¶éããŸãã Lodashã®ãããªã©ã€ãã©ãªã¯ãã€ãã³ããã³ãã©ãŒããããŠã³ã¹ããã³ã¹ãããã«ããããã®ãŠãŒãã£ãªãã£é¢æ°ãæäŸããŸãã
3. CSSããããã£ã®æé©å
å¯èœãªéããtransformãopacityãªã©ãã¬ã€ã¢ãŠãã®åèšç®ãŸãã¯ãªãããŒãããªã¬ãŒããªãCSSããããã£ã䜿çšããŸããããããã©ãŒãã³ã¹ã®é«ãä»£æ¿ææ®µã«çœ®ãæããããšãã§ããå Žåã¯ãã³ã³ããã¯ãšãªå
ã§widthãheightãããã³positionãªã©ã®ããããã£ãçŽæ¥äœ¿çšããããšãé¿ããŸãã
4. CSS Containmentã®äœ¿çš
containããããã£ã䜿çšããŠãèŠçŽ ãåé¢ããã¬ã€ã¢ãŠãã®åèšç®ãããŒãžã®ä»ã®éšåã«äŒæããã®ãé²ããŸããã³ã³ããã«contain: layoutãé©çšãããšãã³ã³ããå
ã®å€æŽãã³ã³ããå€ã®ã¬ã€ã¢ãŠãã®åèšç®ãããªã¬ãŒããã®ãé²ãããšãã§ããŸãã
5. é床ã®ãã¹ãã®åé¿
ã³ã³ãããšã¯ãšãªã®ãã¹ããæå°éã«æããŠãã¯ãšãªè©äŸ¡ã®è€éãã軜æžããŸãã DOMæ§é ããã©ããåãããã代æ¿ã¬ã€ã¢ãŠãææ³ã䜿çšããŠãæ·±ããã¹ããããã³ã³ããã®å¿ èŠæ§ãæžããããšãæ€èšããŠãã ããã
6. CSSã«ã¹ã±ãŒããšç¶æ¿ã®æŽ»çš
CSSã«ã¹ã±ãŒããšç¶æ¿ãå©çšããŠãåé·ãªã¹ã¿ã€ãªã³ã°ãåé¿ããã³ã³ããã¯ãšãªã«ãã£ãŠé©çšãããã¹ã¿ã€ã«ã®æ°ãæžãããŸããåºæ¬ã¯ã©ã¹ã§å ±éã¹ã¿ã€ã«ãå®çŸ©ããã³ã³ããã¯ãšãªå ã§éžæçã«äžæžãããŸãã
7. 代æ¿ã¬ã€ã¢ãŠãææ³ã®æ€èš
å Žåã«ãã£ãŠã¯ãCSS GridãFlexboxãªã©ã®ä»£æ¿ã¬ã€ã¢ãŠãææ³ã¯ãç¹ã«è€éãªã¬ã€ã¢ãŠãã®å Žåãã³ã³ããã¯ãšãªãããåªããããã©ãŒãã³ã¹ãæäŸããå¯èœæ§ããããŸãããããã®ææ³ãã³ã³ããã¯ãšãªã®ãªãŒããŒããããªãã§ç®çã®ã¬ã€ã¢ãŠããå®çŸã§ãããã©ãããè©äŸ¡ããŸããããšãã°ãCSS Gridã®minmax()颿°ã䜿çšãããšãç¹å®ã®ã·ããªãªã§ã³ã³ããã¯ãšãªã«äŸåããã«ã¬ã¹ãã³ã·ãã¬ã€ã¢ãŠããäœæã§ããŸãã
8. ãã³ãããŒã¯ãšãããã¡ã€ã«
æé©åã®åœ±é¿ã枬å®ããæ®ãã®ããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããããã«ãåžžã«ã³ãŒãããã³ãããŒã¯ããã³ãããã¡ã€ã«ããŸãããã©ãŠã¶éçºè ããŒã«ã䜿çšããŠãæé©åã®é©çšååŸã®ã¬ã³ããªã³ã°ããã»ã¹ãèšé²ããã³åæããŸãããã¬ãŒã ã¬ãŒããã¬ã³ããªã³ã°æéãã¡ã¢ãªäœ¿çšéãªã©ã®ããã©ãŒãã³ã¹ã¡ããªãã¯ãæ¯èŒããŠãæé©åã®ã¡ãªãããå®éåããŸãã
å®è·µçãªäŸ
ã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ãç£èŠããã³æé©åããæ¹æ³ã®ããã€ãã®å®è·µçãªäŸãæ€èšããŠã¿ãŸãããã
äŸ1ïŒã«ãŒãã³ã³ããŒãã³ãã®æé©å
ã³ã³ãããµã€ãºã«åºã¥ããŠã¬ã€ã¢ãŠããé©å¿ãããã«ãŒãã³ã³ããŒãã³ããæ³åããŠã¿ãŠãã ãããæåã¯ãã³ã³ããŒãã³ãã¯ããã©ã³ããµã€ãºãç»åãµã€ãºãããã³ééã調æŽããããã«ãå€ãã®æ¡ä»¶ãæã€è€éãªã³ã³ããã¯ãšãªã䜿çšããå¯èœæ§ããããŸããããã¯ãç¹ã«ã¢ãã€ã«ããã€ã¹ã§ããã©ãŒãã³ã¹ã®åé¡ã«ã€ãªããå¯èœæ§ããããŸãã
ç£èŠïŒãã©ãŠã¶ã®[ããã©ãŒãã³ã¹[Performance]]ã¿ãã䜿çšããŠãã¬ã³ããªã³ã°ããã»ã¹ãèšé²ããè©äŸ¡ã«æãæéããããã³ã³ããã¯ãšãªãç¹å®ããŸãã
æé©åïŒ
- æ¡ä»¶ã®æ°ãæžãããCSS倿°ã䜿çšããŠäžè¬çã«äœ¿çšãããå€ãä¿åããããšã«ãããã¯ãšãªãç°¡çŽ åããŸãã
- ã¬ã€ã¢ãŠãã®åèšç®ãé¿ããããã«ãç»åã®å¹
ãšé«ããçŽæ¥æäœãã代ããã«ã
transform: scale()ã䜿çšããŸãã - ã«ãŒãã³ã³ããŒãã³ãã«
contain: layoutãé©çšããŠãã«ãŒãå ã®å€æŽãããŒãžã®ä»ã®èŠçŽ ã®ã¬ã€ã¢ãŠãã«åœ±é¿ãäžããªãããã«ããŸãã
äŸ2ïŒããã²ãŒã·ã§ã³ã¡ãã¥ãŒã®æé©å
ããã²ãŒã·ã§ã³ã¡ãã¥ãŒã¯ãå©çšå¯èœãªã¹ããŒã¹ã«åºã¥ããŠãæ°Žå¹³ã¬ã€ã¢ãŠããšåçŽã¬ã€ã¢ãŠããåãæ¿ããããã«ã³ã³ããã¯ãšãªã䜿çšããå ŽåããããŸããã³ã³ãããµã€ãºã®é »ç¹ãªå€æŽã¯ãé »ç¹ãªã¯ãšãªè©äŸ¡ãšã¬ã€ã¢ãŠãã®åèšç®ãããªã¬ãŒããå¯èœæ§ããããŸãã
ç£èŠïŒWebãã€ã¿ã«[Web Vitals]æ¡åŒµæ©èœã䜿çšããŠCLSãç£èŠããããã²ãŒã·ã§ã³ã¡ãã¥ãŒãã¬ã€ã¢ãŠãã·ãããåŒãèµ·ãããŠãããã©ãããç¹å®ããŸãã
æé©åïŒ
- ãµã€ãºå€æŽã€ãã³ãããããŠã³ã¹ããŠãã¯ãšãªè©äŸ¡ã®é »åºŠãå¶éããŸãã
- CSSãã©ã³ãžã·ã§ã³ã䜿çšããŠãæ°Žå¹³ã¬ã€ã¢ãŠããšåçŽã¬ã€ã¢ãŠãéã®ã¹ã ãŒãºãªãã©ã³ãžã·ã§ã³ãäœæãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸãã
- ã³ã³ããã¯ãšãªããµããŒãããŠããªãå€ããã©ãŠã¶ã®ãã©ãŒã«ããã¯ãšããŠãã¡ãã£ã¢ã¯ãšãªã䜿çšããããšãæ€èšããŠãã ããã
äŸ3ïŒã¬ã¹ãã³ã·ãç»åã®ã£ã©ãªãŒã®æé©å
ç»åã®ã£ã©ãªãŒã¯ãã³ã³ããå ã®å©çšå¯èœãªã¹ããŒã¹ã«åºã¥ããŠãç°ãªããµã€ãºã®ç»åã衚瀺ããããã«ã³ã³ããã¯ãšãªã䜿çšããå ŽåããããŸãã倧ããªç»åãããŒãããŠã¬ã³ããªã³ã°ãããšãç¹ã«ã¢ãã€ã«ããã€ã¹ã§ããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ããããŸãã
ç£èŠïŒãã©ãŠã¶ã®[ãããã¯ãŒã¯[Network]]ã¿ãã䜿çšããŠãç»åã®èªã¿èŸŒã¿æéãç£èŠãã倧ããªç»åãäžå¿ èŠã«ããŒããããŠãããã©ãããç¹å®ããŸãã
æé©åïŒ
- ã¬ã¹ãã³ã·ãç»åïŒ
srcset屿§ïŒã䜿çšããŠãããã€ã¹ã®ç»é¢ãµã€ãºãšè§£å床ã«åºã¥ããŠç°ãªããµã€ãºã®ç»åãããŒãããŸãã - é å»¶èªã¿èŸŒã¿ã䜿çšããŠãç»åããã¥ãŒããŒãã«è¡šç€ºããããŸã§ç»åã®èªã¿èŸŒã¿ãå»¶æããŸãã
- å§çž®æè¡ã䜿çšããŠç»åãæé©åãããã¡ã€ã«ãµã€ãºãåæžããŸãã
ã°ããŒãã«ãªèæ ®äºé
ã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ãæé©åããå ŽåããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ã®ããã°ããŒãã«ãªèŠå ãèæ ®ããããšãéèŠã§ãã
- ãããã¯ãŒã¯é å»¶ïŒããŸããŸãªå°ççå°åã®ãŠãŒã¶ãŒã¯ãããŒãžã®èªã¿èŸŒã¿æéãšå¿çæ§ã«åœ±é¿ãäžããå¯èœæ§ã®ãããç°ãªããããã¯ãŒã¯é å»¶ãçµéšããå¯èœæ§ããããŸããã³ã³ãã³ãé ä¿¡ãããã¯ãŒã¯ïŒCDNïŒã䜿çšããŠãããŸããŸãªå°åã®è³ç£ãæé©åããŸãã
- ããã€ã¹æ©èœïŒããŸããŸãªåœã®ãŠãŒã¶ãŒã¯ãåŠçèœåãšç»é¢ãµã€ãºãç°ãªãããŸããŸãªã¿ã€ãã®ããã€ã¹ã䜿çšããå¯èœæ§ããããŸããããŒãšã³ãã®ã¢ãã€ã«ããã€ã¹ãå«ããããŸããŸãªããã€ã¹çšã«ã³ã³ããã¯ãšãªãæé©åããŸãã
- èšèªãšããŒã«ãªãŒãŒã·ã§ã³ïŒèšèªãç°ãªããšãããã¹ãã®é·ããšæ¹åã®å€åã«ãããç°ãªãã¬ã€ã¢ãŠã調æŽãå¿ èŠã«ãªãå ŽåããããŸããã³ã³ããã¯ãšãªã䜿çšããŠããŠãŒã¶ãŒãéžæããèšèªã«åºã¥ããŠã¬ã€ã¢ãŠããé©å¿ãããŸãã
- ã¢ã¯ã»ã·ããªãã£ïŒã³ã³ããã¯ãšãªãã¢ã¯ã»ã·ããªãã£ã«æªåœ±é¿ãäžããªãããã«ããŸããæ¯æŽæè¡ã䜿çšããŠãŠã§ããµã€ãããã¹ãããé害ã®ãã人ã ãå©çšã§ããããã«ããŸãã
çµè«
CSSã³ã³ããã¯ãšãªã¯ãé©å¿æ§ãããåå©çšå¯èœãªã³ã³ããŒãã³ããäœæããããã®åŒ·åãªæ¹æ³ãæäŸããŸããããã©ãŒãã³ã¹ãç£èŠããã³åæããããšã«ãããæœåšçãªåé¡ãç¹å®ããŠå¯ŸåŠãããã¹ãŠã®ããã€ã¹ãšç»é¢ãµã€ãºã§ã¹ã ãŒãºã§å¹ççãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿èšŒã§ããŸãããã®ã¬ã€ãã§æŠèª¬ãããŠããææ³ãæ¡çšããŠãã³ã³ããã¯ãšãªãæé©åããã¬ã¹ãã³ã·ãWebãã¶ã€ã³ã®å¯èœæ§ãæå€§éã«åŒãåºããŸãããããžã§ã¯ãã®é²åã«åãããŠå®è£ ã宿çã«èŠçŽããæ¹è¯ããŠãæé©ãªããã©ãŒãã³ã¹ãšã¹ã±ãŒã©ããªãã£ãç¶æããŸããæ éãªèšç»ãšå€åãªç£èŠã«ãããã³ã³ããã¯ãšãªã®åãæŽ»çšããŠãäžçäžã®ãŠãŒã¶ãŒã«çã«äŸå€çã§ããã©ãŒãã³ã¹ã®é«ãWebãšã¯ã¹ããªãšã³ã¹ãäœæã§ããŸãã
æœåšçãªããã©ãŒãã³ã¹ã®ããã«ããã¯ã«äºåã«å¯ŸåŠããããšã«ãããWebãµã€ããé«éã§å¿çæ§ãé«ãããŠãŒã¶ãŒãã¬ã³ããªãŒã§ããããšãä¿èšŒã§ããŸããããã«ããããŠãŒã¶ãŒæºè¶³åºŠãåäžããã ãã§ãªããæ€çŽ¢ãšã³ãžã³ã®ã©ã³ãã³ã°ãšå šäœçãªããžãã¹ã®æåã«ãè²¢ç®ããŸããã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ã®æé©åã¯ãç¶ç¶çãªç£èŠãåæãæ¹è¯ãå¿ èŠãªç¶ç¶çãªããã»ã¹ã§ããããšãå¿ããªãã§ãã ãããææ°ã®ãã¹ããã©ã¯ãã£ã¹ãšããŒã«ã«ã€ããŠåžžã«ææ°ã®æ å ±ãå ¥æããèšèšãšéçºã®æ±ºå®ãè¡ãéã«ã¯åžžã«ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåªå ããŠãã ããã